<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>打包SRM组件</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <main>
      <div class="build-section">
        <h1 style="color: red;">暂时只发UAT版本</h1>
        <h3>当前时间: <span class="time"></span></h3>

        <section class="params-section">
          <div class="param">你的昵称: <input id="nickname" /></div>
          <div class="param">待合并分支: <input id="branch" /></div>
        </section>


        <!-- <div class="tips">
          <p>
            请先合并 {你的功能分支} 到 <b>cmp-build</b>  分支
          </p>
        </div> -->

        <button class="btn" id="mergeBtn">1. 拉取cmp-build最新代码</button>
        <!-- <button class="btn" id="buildBtn">2. 打sit&uat组件包</button> -->
        <button class="btn" id="buildBtn">2. 打uat组件包</button>

        <div class="prod-wrap">
          <!-- <em>hotfix需自行合并到cmp-relase,并推送远端</em> -->
          <button class="btn" id="buildProdBtn">打生产包</button>
        </div>
      </div>

      <!-- <hr> -->

      <div class="output"></div>

      <button id="topBtn">TOP</button>
    </main>
    <script src="common.js"></script>
    <script>      
      function listenInputAndCache(id) {
        const input = $(`#${id}`)
        const cachedValue = localStorage[id]
        if (cachedValue) {
          input.value = cachedValue
        }

        input.addEventListener('change', ev => {
          localStorage[id] = ev.target.value
          console.log('ev.target.value::', ev.target.value)
        })
      }

      function getInputValue(id) {
        return $(`#${id}`).value
      }
      
      async function mergeBranch() {
        clearOutput()
        const stopScroll = autoScroll()
        const nickname = getInputValue('nickname')
        const branch = getInputValue('branch')
        hide('#mergeBtn')
        const res = await SRequest.post("/merge", {nickname, branch}, outputChunk, stopScroll);
        await sleep(3)
        show('#mergeBtn')
      }
      
      async function buildComponent(qstr = '') {
        const isProd = qstr.includes('prod')
        clearOutput()
        const stopScroll = autoScroll()
        hide(isProd ? '#buildProdBtn' : '#buildBtn')
        const nickname = getInputValue('nickname')
        const branch = getInputValue('branch')
        await sleep(3)
        const response = await SRequest.post('/build' + (qstr ? `?${qstr}` : ''), {nickname, branch}, outputChunk, stopScroll)
        show(isProd ? '#buildProdBtn' : '#buildBtn')
      }

      function listenClick(btnId, callback) {
        const btn = $(`#${btnId}`)
        btn && btn.addEventListener('click', callback)
      }
      
      function main() {

        if (localStorage.nickname !== 'pan') {
          $('.prod-wrap').remove()
          $('#mergeBtn').remove()
        }

        listenClick('mergeBtn', mergeBranch)
        listenClick('buildBtn', () => buildComponent())
        listenClick('buildProdBtn', () => buildComponent('prod=1'))

        $("#topBtn").addEventListener('click', () => {
          window.scrollTo(0, 0)
          autoScroll.stop()
        })

        $('.time').textContent = new Date().toLocaleString().replace(/\//g, '-')

        
        listenInputAndCache('nickname')
        listenInputAndCache('branch')
      }


      main();
    </script>
  </body>
</html>
